<template>
 <div>
  <city-header></city-header>
  <city-search :cities="cities"></city-search>
  <city-list :city="city" :hot="hotcity" :letter="letter"></city-list>
  <city-alphabet :city="city" @change="handerChange"></city-alphabet>
 </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'

export default {
  name: 'City',
  components:{
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  data (){
  	return{
  		hotcity:[],
  		city:{},
      cities:{},
  		letter:''

  	}
  },
  methods:{
  	getCityInfo(){
  		axios.get('/static/mode/city.json').then((response)=>{

          this.hotcity = response.data.data.hotCities
          this.cities = response.data.data.cities
          this.city = response.data.data.cities

  		
  		})
  	},
  	handerChange(letter){
  		this.letter = letter
  	}

  },
  mounted(){
  	this.getCityInfo()
  },


  
  }

</script>

<style>

</style>
